<template>
  <div>
    <div style="width:100px;height:100px;border:1px solid" @edit="editF">
      asdf
    </div>
    <div id="qrcode" title="点击下载图片" style="cursor:pointer" @click="downLoadImg"></div> <!-- 创建一个div，并设置id为qrcode -->
  </div>
</template>

<script>
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
  data() {
    return {
      a: 1,
      b: 2
    }
  },
  watch: {
    'a': {
      handler(newValue){
        console.log('a改版了')
        this.b = 'asdf'
        console.log('a改版了222')
      }
    },
    'b': {
      handler(newValue){
        console.log('b改版了')
      }
    }
  },
  created() {
    setTimeout(() => {
      this.a = 'asdf'
    }, 1000)
  },
 
  mounted() {
    this.qrcode()
  },
  methods: {
    editF(){
      console.log(1)
    },
    adownLoadImg(srcs) {
      const aDownload = document.createElement('a')

      aDownload.setAttribute('downLoad', '')
      aDownload.setAttribute('href', srcs)
      aDownload.click()
    },
    downLoadImg(){
      let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')[0]

      console.log(document.getElementById('qrcode'))
      this.adownLoadImg(myCanvas.toDataURL('image/png'))
    },
    // 生成二维码
    qrcode() {
      let qrcode = new QRCode('qrcode', {
        width: 211,  
        height: 212,
        text: 'asdf', // 二维码地址
        colorDark: '#000',
        colorLight: '#fff'
      })
    }
  }
}
</script>

<style lang="less" scoped>
#qr-code {
    width: 100%;
    height: 100%;
 
    .canvas {
        display: none;
    }
 
    .code {
        height: 140px;
        width: 140px;
        margin: 0 auto;
        border: 1px solid #ccc;
        margin-top: 100px;
    }
    p {
        margin: 0 auto;
        margin-top: 10px;
        font-size: 14px;
        color: #555;
        text-align: center;
    }
}

